<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>fireHydrant</title>
  <script type="text/javascript" th:inline="JavaScript">
  </script>
</head>

<body>
  <div th:fragment="fireHydrant">
    <!-- 消火栓历史详情-->
    <div class="cd-popup3 fireHydrantHisDetails fireHydrantHisDetails-pop" id="fireHydrantHisDetails">
      <div class="cd-popup-container3 fireHydrantHisDetailsModal manageModal modalStyle fireHydrantHisDetailsPopStyle">
        <div class="modal-top"></div>
        <div class="modal-title">消火栓历史详情</div> 
        <!-- 关闭 -->
        <a class="cd-popup-close closeModal"></a>
        <!-- 历史消火栓压力折线图 -->
        <div id="fireHydrantHisPressure" class="fireHydrantHisPressure" style="width: 624px;height:230px;position:absolute;top: 140px;left: 0px;">
        </div>
        <!-- 折线图 补充内容 -->
        <div class="fireHydrantHisPressurePlus">
          <div class="fireHydrantHisPressurePlusTiming">时刻(时)</div>
          <div class="fireHydrantHisPressurePlusGreen"><span>--</span>消火栓阀值</div>
          <div class="fireHydrantHisPressurePlusRed"><span>--</span>水位阀值</div>
        </div>
        <!-- 右上角时间选择与搜索部分 -->
        <div class="fireHydrantHisRight clearfix">
          <div class="fl">
            <span>起始时间:</span>  
            <!-- 时间选择器 -->
            <input type="text" class="timePicker time" value="10:00" >
          </div>
          <div class="fl">
            <span>结束时间:</span>  
            <input type="text" class="timePicker time" value="10:00" >
          </div>
          <input type="button" value="搜索" class="fireHydrantHisRightSearch">
        </div>

        <!-- 信息卡片部分 -->
        <div class="fireHydrantHisInfoCard">
          <div>
            <span>设备编号:</span>
            <span class="fireHydrantHisInfoCardValue">xxx</span>
          </div>
          <div>
            <span>地址:</span>
            <span class="fireHydrantHisInfoCardValue">上城区</span>
          </div>
          <div>
            <span>联系人:</span>
            <span class="fireHydrantHisInfoCardValue">小四</span>
          </div>
          <div>
            <span>电话:</span>
            <span class="fireHydrantHisInfoCardValue">xxxx</span>
          </div>
          <div>
            <span>消火栓水位阀值:</span>
            <span class="fireHydrantHisInfoCardValue">1000Pa</span>
          </div>
          <div>
            <span>厂家:</span>
            <span class="fireHydrantHisInfoCardValue">xxx</span>
          </div>
        </div>
        
        <!-- 表格 -->
        <table class="table table-bordered fireHydrantHisTable">
          <thead>
            <tr>
              <th>序号</th>
              <th>上报时间</th>
              <th>历史压力(Pa)</th>
              <th>历史水位</th>
              <th>报警类型</th>
              <th>处理人</th>
              <th>处理时间</th>
            </tr>
          </thead>
          <tbody class="tbodyList">
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>

        <!-- 分页 -->
        <div class="earlyWarningPageBox pageBox" id="fireHydrantHisDetailsPageBox">
          <ul class="pagination" id="earlyWarningPage"></ul>
          <div class="pageJump none">
            <span>跳转到</span>
            <input type="text" />
            <span>页</span>
            <button type="button" class="button btn btn-default">跳转</button>
          </div>
        </div>

        <!-- 导出 -->
        <input class="fireHydrantHisExport" type="button" value="导出">
      </div>
    </div>

    <!-- 消火栓查看详情 -->
    <div class="cd-popup3 fireHydrantDetails fireHydrantDetails-pop" id="fireHydrantDetailsModal">
      <div class="cd-popup-container3 fireHydrantDetailsModal modalStyle">
          <!-- 小叉 关闭按钮 -->
          <a class="cd-popup-close closeModal" href="javascript:;"></a>
          <div class="modal-title">消火栓查看详情</div>
          <div class="bigVideoBox">
            <img style="width:60%;height:100%;" src="/public/images/fireplug/fireplug.png" alt="">
          </div>
          <form id="fireHydrantDetailsForm" style="text-align: left; margin-top: 20px;">
              <div class="row mb24" style="width:100%;">
                  <div class="fl" style="width:50%;">
                    <div class="col-xs-4">
                        <span>设备名称 :</span>
                    </div>
                    <div class="col-xs-8">
                        <input type="text" class="form-control notEmptyInput disabledStyle fireHydrantDetailsName" autocomplete="off" disabled>
                    </div>
                  </div>  
                  <div class="fr" style="width:50%;">
                    <div class="col-xs-4" style="text-align: right;">
                        <span>是否启用 :</span>
                    </div>
                    <div class="col-xs-8">
                        <input type="text" class="form-control notEmptyInput disabledStyle fireHydrantDetailsUse" autocomplete="off" disabled>
                    </div>
                  </div>
              </div>
              <div class="row mb24" style="width:100%;">
                  <div class="fl" style="width:50%;">
                    <div class="col-xs-4">
                        <span>设备类型 :</span>
                    </div>
                    <div class="col-xs-8">
                        <input type="text" class="form-control notEmptyInput disabledStyle fireHydrantDetailsDeviceType" autocomplete="off" disabled>
                    </div>
                  </div>  
                  <div class="fr" style="width:50%;">
                    <div class="col-xs-4" style="text-align: right;">
                        <span>设备编码 :</span>
                    </div>
                    <div class="col-xs-8">
                        <input type="text" class="form-control notEmptyInput disabledStyle fireHydrantDetailsDevCode" autocomplete="off" disabled>
                    </div>
                  </div>
              </div>
              <div class="row mb24" style="width:100%;">
                  <div class="fl" style="width:50%;">
                    <div class="col-xs-4">
                        <span>安装地址 :</span>
                    </div>
                    <div class="col-xs-8">
                        <input type="text" class="form-control notEmptyInput disabledStyle fireHydrantDetailsAddress" autocomplete="off" disabled>
                    </div>
                  </div>  
                  <div class="fr" style="width:50%;">
                    <div class="col-xs-4" style="text-align: right;">
                        <span>安装场所 :</span>
                    </div>
                    <div class="col-xs-8">
                        <input type="text" class="form-control notEmptyInput disabledStyle fireHydrantDetailsFixedPlace" autocomplete="off" disabled>
                    </div>
                  </div>
              </div> 
              <div class="row mb24" style="width:100%;">
                  <div class="fl" style="width:50%;">
                    <div class="col-xs-4">
                        <span>经度 :</span>
                    </div>
                    <div class="col-xs-8">
                        <input type="text" class="form-control notEmptyInput disabledStyle fireHydrantDetailsLongitude" autocomplete="off" disabled>
                    </div>
                  </div>  
                  <div class="fr" style="width:50%;">
                    <div class="col-xs-4" style="text-align: right;">
                        <span>纬度 :</span>
                    </div>
                    <div class="col-xs-8">
                        <input type="text" class="form-control notEmptyInput disabledStyle fireHydrantDetailsLatitude" autocomplete="off" disabled>
                    </div>
                  </div>
              </div>
              <div class="row mb24 none" style="width:100%;">
                  <div class="fl" style="width:50%;">
                    <div class="col-xs-4">
                        <span>安装日期 :</span>
                    </div>
                    <div class="col-xs-8">
                        <input type="text" class="form-control notEmptyInput disabledStyle fireHydrantDetailsInsDate" autocomplete="off" disabled>
                    </div>
                  </div>  
                  <div class="fr" style="width:50%;">
                    <div class="col-xs-4" style="text-align: right;">
                        <span>截止日期 :</span>
                    </div>
                    <div class="col-xs-8">
                        <input type="text" class="form-control notEmptyInput disabledStyle fireHydrantDetailsDeadline" autocomplete="off" disabled>
                    </div>
                  </div>
              </div>
              <div class="row none" style="width:100%;">
                <div class="col-xs-3">
                  <span>联系人 :</span>
                </div>
                <div class="col-xs-9">
                  <input type="text" class="form-control notEmptyInput disabledStyle fireHydrantDetailsContact" autocomplete="off" disabled>
                </div>
              </div>
              <div class="row none" style="width:100%;">
                  <div class="col-xs-3">
                    <span>备注 :</span>
                  </div>
                  <div class="col-xs-9">
                    <input type="text" class="form-control notEmptyInput disabledStyle fireHydrantDetailsRemark" autocomplete="off" disabled>
                  </div>
              </div>
              <div class="row" style="width:100%;">
                  <div class="col-xs-3">
                      <span>所属组织:</span>
                  </div>
                  <div class="col-xs-9">
                      <input type="text" class="form-control notEmptyInput disabledStyle fireHydrantDetailsOrgList" autocomplete="off" disabled>
                  </div>
              </div>
          </form>
      </div>
  </div>
  </div>
</body>
</html>